var React = require('react');
var ModalDialog = require('../../common/component/dialog/modal-dialog.node');
var ModalBody = require('../../common/component/dialog/modal-body.node');
var ModalFooter = require('../../common/component/dialog/modal-footer.node');

module.exports = function EditMenuDialog(props) {

  return (
    <>
      <ModalDialog dialogTitle="${t('ui.menu.common.dialog.editMenu')}">
        <ModalBody>
          <form>
            <input type="hidden" id="id" name="id" data-x-name="edit.id" />
            <input type="hidden" id="templateId" name="templateId" data-x-name="edit.templateId" />
            <input type="hidden" id="parentId" name="parentId" data-x-name="edit.parentId" />
            <input type="hidden" id="versionNumber" name="versionNumber" data-x-name="edit.versionNumber" />

            {/* 菜单代码 */}
            <div className="form-group x-form-required">
              <label htmlFor="menuCode">{"${t('ui.menu.common.field.menuCode')}"}</label>
              <input type="text" className="form-control" id="menuCode" name="menuCode" data-x-name="edit.menuCode"
                placeholder={"${t('ui.system.common.placeholder.inputCodeLimitLength', 1, 50)}"} />
            </div>

            {/* 菜单名称 */}
            <div className="form-group x-form-required">
              <label htmlFor="menuName">{"${t('ui.menu.common.field.menuName')}"}</label>
              <input type="text" className="form-control" id="menuName" name="menuName" data-x-name="edit.menuName"
                placeholder={"${t('ui.system.common.placeholder.inputTextLimitLength', 1, 20)}"} />
            </div>

            {/* 上级菜单 */}
            <div className="form-group">
              <label htmlFor="parentName">{"${t('ui.menu.common.field.parentName')}"}</label>
              <div className="input-group">
                <input type="text" className="form-control" id="parentName" name="parentName" data-x-name="edit.parentName" disabled />
                <div className="input-group-append">
                  <button data-x-ui="chooseParentMenuBtn" className="btn btn-outline-secondary" type="button">
                    {"${t('ui.system.common.btn.choose')}"}
                  </button>
                </div>
              </div>
            </div>

            {/* 菜单图标 */}
            <div className="form-group">
              <label htmlFor="menuIcon">{"${t('ui.menu.common.field.menuIcon')}"}</label>
              <input type="text" className="form-control" id="menuIcon" name="menuIcon" data-x-name="edit.menuIcon"
                placeholder={"${t('ui.system.common.placeholder.inputTextLimitLength', 0, 50)}"} />
            </div>

            {/* 菜单路径 */}
            <div className="form-group x-form-required">
              <label htmlFor="menuPath">{"${t('ui.menu.common.field.menuPath')}"}</label>
              <input type="text" className="form-control" id="menuPath" name="menuPath" data-x-name="edit.menuPath"
                placeholder={"${t('ui.system.common.placeholder.inputTextLimitLength', 1, 500)}"} />
            </div>

            {/* 菜单序号 */}
            <div className="form-group x-form-required">
              <label htmlFor="menuOrder">{"${t('ui.menu.common.field.menuOrder')}"}</label>
              <input type="text" className="form-control" id="menuOrder" name="menuOrder" data-x-name="edit.menuOrder"
                placeholder={"${t('ui.system.common.placeholder.inputDigits')}"} />
            </div>

            {/* 是否显示 */}
            <div className="form-group x-form-required">
              <label htmlFor="showFlag">{"${t('ui.system.common.field.showFlag')}"}</label>
              <select className="form-control" id="showFlag" name="showFlag" data-x-name="edit.showFlag"
                defaultValue="true">
                <option value="true">{"${t('ui.system.common.option.showFlag.true')}"}</option>
                <option value="false">{"${t('ui.system.common.option.showFlag.false')}"}</option>
              </select>
            </div>

            {/* 备注 */}
            <div className="form-group">
              <label htmlFor="remark">{"${t('ui.system.common.field.remark')}"}</label>
              <input type="text" className="form-control" id="remark" name="remark" data-x-name="edit.remark"
                placeholder={"${t('ui.system.common.placeholder.inputTextLimitLength', 0, 200)}"} />
            </div>

          </form>
        </ModalBody>
        <ModalFooter confirmLabel="${t('ui.system.common.btn.save')}" cancelLabel="${t('ui.system.common.btn.cancel')}" />
      </ModalDialog>
    </>
  );
};
